<template>
  <div class="">
    <input :id="id" type="file" :multiple="multiple" :accept="accept" style="display: none" @change="uploadFileHandler($event)">
  </div>
</template>

<script setup>
import { postFileUpload } from '@/api/file'
import { message } from 'ant-design-vue';
const props = defineProps({
  // input id 必传
  id: {
    type: String,
    required: true,
  },
  // 多文件上传标识
  multiple: {
    type: Boolean,
    default: false,
  },
  // 限制文件上传格式
  accept: {
    type: String,
    default: '*',
  },
  // 限制文件个数
  maxLen: {
    type: Number,
    default: 10,
  },
  // 限制文件大小,单位M
  maxSize: {
    type: Number,
    default: 200,
  },
  // 限制文件上传格式 -- 自定义，解决rar类型不可限制 例如['.zip', '.rar']
  customAccept: {
    type: Array,
    default: () => [],
  },

});
const loading = ref(false);
const fileName = ref('');

const emit = defineEmits(['progressChange', 'change', 'fileNameChange', 'update:value']);
/**
 * @description 点击添加文件
 */
function addFile() {
  document.getElementById(props.id).click();
}
/**
 * @description 选择上传文件
 */
function uploadFileHandler(e) {
  console.log(e.target.files);
  if (!e.target.files && e.target.files.length == 0) {
    return;
  }
  if (loading.value) {
    return message.error('有文件正在上传中，请稍后再上传其他文件');
  }
  const file = e.target.files;
  // 错误提示
  const errMsg = {
    maxSize: `只支持${props.maxSize}M文件`,
    maxLen: `最多可上传${props.maxLen}个文件`,
  };
  // 文件大小限制
  if (props.maxSize) {
    for (let i in file) {
      if (file[i].size / 1024 / 1024 > props.maxSize) {
        return message.error(errMsg.maxSize);
      }
    }
  }

  // 传参
  let formData = new FormData();
  let name = [];
  for (let i of file) {
    // 解决rar类型不可限制
    const pos = i.name.lastIndexOf('.');
    const fileType = i.name.substring(pos, i.name.length);
    console.log(fileType, props.customAccept);
    if (props.customAccept.length && !props.customAccept.includes(fileType.toLowerCase())) {
      message.error(`仅限${props.customAccept.join('、')}格式文件上传`);
      e.target.value = ''; // 清除input值
      return;
    }
    name.push(i.name);
    formData.append('file', i);
  }
  formData.append('refType', props.refType);

  // 单文件上传、多文件上传
  loading.value = true;
  postFileUpload(formData)
    .then(res => {
      loading.value = false;
      e.target.value = ''; // 清除input值
      if (res.code === 0) {
        fileName.value = name;
        // message.success('上传成功');
        afterUpLoad(res.data);
      } else {
        message.error(res.message || '文件上传失败');
      }
    })
    .catch(err => {
      loading.value = false;
      e.target.value = ''; // 清除input值
      message.success(err.message || '文件上传失败');
    });
}
// 上传成功后
function afterUpLoad(data) {
  // 若使用value传值 -- 自行处理上传结果
  emit('change', data);

  // 若使用v-model传值 -- 直接拿文件路径
//   if (Array.isArray(props.value)) {
//     // 如果value值为数组
//     // 多文件上传接口返回值为数组
//     props.multiple && emit('update:value', props.value.concat(data.map(item => item.path)));
//     // 单文件上传接口返回值为对象
//     !props.multiple && emit('update:value', props.value.concat([data.path]));
//   } else {
//     // 传入value值为String类型，而又设置了multiple，则取第一个选择的文件路径
//     props.multiple && emit('update:value', data[0].path);
//     // 正常情况下
//     !props.multiple && emit('update:value', data.path);
//   }
}

defineExpose({
  addFile,
});
</script>

<style lang="less" scoped></style>
